<template>
  <!-- mv -->
  <div class="playlist-item-box">
    <div class="playlist-mv-cover" @click="clickMv(item)">
      <span class="playCount">
        <i class="iconfont">&#xec46;</i>
        {{ item | showCount }}
      </span>
      <a href="javascript:;">
        <img
          class="playlist-mv-pic"
          :src="item.picUrl || item.cover || item.imgurl || item.coverUrl"
          :alt="item.name || item.title"
        />
        <i class="mod-cover-mark"></i>
        <i class="mod-cover-icon-play"></i>
      </a>
    </div>
    <span class="mvlogo">
      <i class="iconfont">&#xe605;</i>
    </span>
    <h4 class="playlist-title">
      <a
        href="javascript:;"
        class="playlist-title-txt"
        :title="item.name || item.title"
        @click="clickMv(item)"
      >
        {{ item.name || item.title }}
      </a>
    </h4>
    <h4 class="playlist-artist" v-if="showArtist">
      <a
        href="javascript:;"
        @click="clickArtist(item.artist.id)"
        :title="item.artistName"
      >
        {{ item.artistName }}
      </a>
    </h4>
    <h4 class="playlist-author" v-if="item.artists">
      <a
        v-for="(artist, n) in item.artists"
        :key="n"
        href="javascript:;"
        @click="clickArtist(artist.id)"
        :title="artist.name"
      >
        <i v-if="n > 0"> / </i>
        {{ artist.name }}
      </a>
    </h4>
    <h4 class="playlist-creator" v-if="item.creator">
      <a
        v-for="(artist, n) in item.creator"
        :key="n"
        href="javascript:;"
        @click="clickArtist(artist.userId)"
        :title="artist.userName"
      >
        <i v-if="n > 0"> / </i>
        {{ artist.userName }}
      </a>
    </h4>
    <!-- <h4 class="playlist-creator" v-if="item.resource">
      by
      <a href="javascript:;" :title="item.resource.userProfile.nickname">
        {{ item.resource.userProfile.nickname }}
      </a>
    </h4> -->
  </div>
</template>

<script>
import { shortCount } from "common/count";
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    showArtist: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  filters: {
    showCount(item) {
      let count;
      if (item.playCount) {
        count = item.playCount;
      } else {
        count = item.playTime;
      }
      return shortCount(count);
    },
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.item);
  },
  methods: {
    clickArtist(id) {
      this.playArtistDetail(id);
    },
    clickMv(item) {
      let id = 0;
      id = item.id || item.vid;
      this.playMv(id);
      // document.documentElement.scrollTo({ top: 141, behavior: "smooth" });
    },
  },
};
</script>

<style>
.playlist-mv-cover {
  position: relative;
  display: block;
  overflow: hidden;
  padding-top: 56%;
}
.playlist-mv-pic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  transform: scale(1) translateZ(0);
  transition: transform 0.5s;
}
.playlist-mv-cover:hover .playlist-mv-pic {
  transform: scale(1.1) translateZ(0);
  transition: transform 0.5s;
}
.playlist-mv-cover .mod-cover-icon-play {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  opacity: 0;
  transform: scale(0.5) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
  zoom: 1;
}
.playlist-mv-cover:hover .mod-cover-icon-play {
  opacity: 1;
  transform: scale(0.7) translateZ(0);
  transition-property: opacity, transform;
  transition-duration: 0.5s;
}
.playlist-mv-cover:hover .mod-cover-mark {
  opacity: 0.3;
  transition: opacity 0.5s;
}
.mvlogo {
  float: left;
  height: 32px;
  line-height: 32px;
  margin-right: 5px;
}
.mvlogo .iconfont {
  font-size: 20px;
  color: var(--color-theme);
}
</style>